<template>
  <view class="city-video-list">
    <scroll-view scroll-y="true" class="myScroll">
      <view class="itemContent">
        <view class="city-video-item" v-for="(item, index) in cityVideoData" :key="item.data.vid">
          <view class="item-video">
            <video
              autoplay
              :src="item.data.urlInfo.url"
              :controls="true"
              enable-play-gesture
              v-if="currentIndex === index"
              :id="index"
            ></video>
            <image :src="item.data.coverUrl" mode="" v-else @click="videoPlay(index)"></image>
            <view class="userPhoto">
              <image :src="item.data.creator.avatarUrl" mode=""></image>
            </view>
          </view>
          <view class="videoInfo" v-if="item.data.title">{{ item.data.title }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import request from '../../../network/request.js'
export default {
  name: 'CityVideoList',
  data() {
    return { cityVideoData: [], isImageShow: true, currentIndex: -1 }
  },
  created() {
    this.getCityVideoList()
  },
  methods: {
    async getCityVideoList() {
      const { datas } = await request('/video/group', { id: '261121' })
      this.cityVideoData = datas
    },
    videoPlay(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.city-video-list {
  width: 100%;
  .myScroll {
    width: 100%;
    height: calc(100vh - 98rpx - 211rpx);
    .itemContent {
      column-count: 2;
      column-gap: 0;
      .city-video-item {
        width: 100%;
        margin-bottom: 20rpx;
        flex-shrink: 0;
        .item-video {
          height: 600rpx;
          display: flex;
          width: 96%;
          justify-content: flex-end;
          flex-direction: column;
          background: black;
          border-radius: 20rpx;
          overflow: hidden;
          video {
            width: 100%;
          }
          image {
            width: 100%;
          }
          .userPhoto {
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            image {
              height: 60rpx;
              width: 60rpx;
              border-radius: 50%;
            }
          }
        }
        .videoInfo {
          padding: 20rpx 20rpx 50rpx 20rpx;
          font-size: 26rpx;
          background: #181723;
          color: gray;
        }
      }
    }
  }
}
</style>
